<template>
    <div>
    <van-nav-bar fixed=true :placeholder=true left-text="返回" left-arrow
    :title="this.$store.state.toname" @click-left="onClickLeft" />
    <ul>
    <li v-for="(item, i) in list" :key="i" :class="item.fromId === fromId ? 'right' : 'left'">
    <van-image round width="40px" height="40px" :src="item.image" />
    <div class="ul-div"><span>{{ item.content }}</span></div>
    </li>
    </ul>
    <van-field type=textarea :autosize=fieldclass class="fix" size="large" v-model="sms" center clearable
    left-icon="chat-o" placeholder="想跟TA说点什么">
    <template #button>
    <van-button icon="success" size="small" type="primary" @click="liaotian"></van-button>
    </template>
    </van-field>
    <div style="height:200px"></div>
    </div>
    </template>
 
<script>
export default {
    name: 'test',
    data() {
        return {
            fieldclass: { maxHeight: 100 },
            sms: "",
            fromId: 0,
            toid: 0,
            list: [],
            websock: null,
        }
    },
    created() {
        this.fromId = this.$store.state.fromid
        this.toid = this.$store.state.toid
        this.initWebSocket()
    },
    destroyed() {
        this.websock.close()
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1)
        },
        liaotian() {
            var str = {
                "fromId": this.fromId,
                "toId": this.toid,
                "content": this.sms,
            }
            var d = JSON.stringify(str)
            this.websock.send(d)
            this.sms = ""
        },
        initWebSocket() { //初始化weosocket
            this.websock = new WebSocket("wss://down.xiaoheihe.work/websocket/" + this.$store.state.fromid + "/" + this.$store.state.toid)
            this.websock.onopen = this.websocketonopen;
            this.websock.onerror = this.websocketonerror;
            this.websock.onmessage = this.websocketonmessage;
            this.websock.onclose = this.websocketclose;
        },
        websocketonopen() { //连接建立之后执行send方法发送数据
        },
        websocketonerror() {//连接建立失败重连

        },
        websocketonmessage(e) { //数据接收
            var a = JSON.parse(e.data)
            this.list.push(a)
        },
        websocketsend(Data) {//数据发送
        },
        websocketclose(e) {  //关闭

        },
    },
}
</script>
<style scoped>
.left {
    text-align: left;
    margin-left: 2%;
    margin-top: 2%;
    margin-bottom: 2%;
}

.right {
    text-align: right;
    margin-left: 2%;
    margin-top: 2%;
    margin-bottom: 2%;
}

.left .van-image {
    float: left;
    margin-top: 0%;
}

.right .van-image {
    float: right;
    margin-top: 0%;
    margin-right: 2%;
}

.left .ul-div {
    text-align: left;
    max-width: 60%;
    display: inline-block;
    border-radius: 10px;
    font-size: 15px;
    margin-left: 2%;
    padding: 10px;
    white-space: pre-wrap;
    resize: none;
    outline: none;
    word-wrap: break-word;
    word-break: break-all;
    background-color: #a6e860;
}

.right .ul-div {
    text-align: left;
    max-width: 60%;
    display: inline-block;
    border-radius: 10px;
    font-size: 15px;
    margin-right: 2%;
    padding: 10px;
    white-space: pre-wrap;
    resize: none;
    outline: none;
    word-wrap: break-word;
    word-break: break-all;
    background-color: #a6e860;
}

.fix {
    position: fixed;
    bottom: 40px;
}
</style>
